<template>
  <view class="main-container">
    <!-- 导航栏部分 -->
    <view class="nav-bar">
      <view class="location-notification">
        <view class="location">
          <image src="/static/dingwei.png"></image>
          <text>杭州市梦想小镇</text>
        </view>
        <view class="notification">
          <image src="/static/通知.png"></image>
        </view>
      </view>
      <view class="search-input-container">
        <image src="/static/放大镜.png" class="aa"></image>
        <input type="text" placeholder="永辉超市优惠商品" />
      </view>
    </view>
    <!-- 中间图片部分 -->
    <view class="middle-image">
      <image src="/static/02.jpg"></image>
    </view>
    <!-- 下方弹性盒子部分 -->
    <view class="bottom-flexbox" >
      <navigator class="flex-item">
        <image src="/static/super.png"></image>
        <text>超市便利</text>
      </navigator>
      <navigator class="flex-item">
        <image src="/static/market.png"></image>
        <text>菜市场</text>
      </navigator>
      <navigator class="flex-item">
        <image src="/static/fruits.png"></image>
        <text>水果店</text>
      </navigator>
      <navigator class="flex-item">
        <image src="/static/flower.png"></image>
        <text>鲜花绿植</text>
      </navigator>
      <navigator class="flex-item">
        <image src="/static/drug.png"></image>
        <text>医药健康</text>
      </navigator>
      <navigator class="flex-item">
        <image src="/static/home.png"></image>
        <text>家居时尚</text>
      </navigator>
      <navigator class="flex-item">
        <image src="/static/cake.png"></image>
        <text>烘焙蛋糕</text>
      </navigator>
      <navigator class="flex-item">
        <image src="/static/sign.png"></image>
        <text>签到</text>
      </navigator>
      <navigator class="flex-item">
        <image src="/static/prestige.png"></image>
        <text>大牌免运</text>
      </navigator>
      <navigator class="flex-item">
        <image src="/static/red.png"></image>
        <text>红包套餐</text>
      </navigator>
    </view>
    <!-- 附近店铺部分 -->
    <view class="nearby-stores">
      <view class="store-header">
        <text>附近店铺</text>
        <text class="more">查看更多</text>
      </view>
      <view class="store-list">
        <view 
          v-for="(store, index) in superStores" 
          :key="index" 
          class="store-item" 
          @click="navigateToDetail(store._id)"
        >
          <view class="store-logo">
            
            <image :src="store.imgUrl"></image> 
          </view>
          <view class="store-info">
            <text class="store-name">{{ store.name }}</text>
            <p>月售: {{ store.sales }} 起送: {{ store.expressLimit }} 基础运费: {{ store.expressPrice }}</p>
            <p class="slogan">{{ store.slogan }}</p>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from "@/config.js";

export default {
  data() {
    return {
      superStores: []
    };
  },
  mounted() {
    this.fetchStores();
  },
  methods: {
    fetchStores() {
      uni.request({
        url: `${config.api_host}super`,
        method: 'GET',
        success: (res) => {
          this.superStores = res.data;
        },
        fail: (err) => {
          console.error('获取店铺数据失败:', err);
        }
      });
    },
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/Detail/storedetail?id=${id}`
      });
    }
  }
};
</script>

<style scoped>
.aa {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.nav-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #0099ff;
  color: white;
  padding: 10px 20px;
}

.location-notification {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}

.location {
  display: flex;
  align-items: center;
}

.location image {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.notification {
  display: flex;
  align-items: center;
}

.notification image {
  width: 20px;
  height: 20px;
}

.search-input-container {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
}

.search-input-container input {
  flex: 1;
  height: 40px;
  border: none;
  padding: 0 15px;
}

.middle-image {
  width: 100%;
}

.middle-image image {
  width: 100%;

}

.nearby-stores {
  width: 100%;
  padding: 15px;
}

.store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.more {
  color: #007AFF;
    margin-right: 20px;
}

.store-list {
  width: 100%;
}

.store-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
}

.store-logo {
  width: 80px;
  height: 80px;
  margin-right: 15px;
}

.store-logo image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-info {
  flex: 1;
}

.store-name {
  font-size: 18px;
  margin-bottom: 5px;
}

.slogan {
  color: #FF5722;
  margin-top: 5px;
}

.loading {
  text-align: center;
  color: #999;
}

.bottom-flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}

.flex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(20% - 10px);
  margin-bottom: 20px;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.flex-item image {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}
.bottom-flexbox{
background:linear-gradient(to bottom,#007AFF,white);
}
</style>    